<!--
 * @Description: 
 * @Author: lixx
 * @Date: 2025-08-19 16:28:31
 * @LastEditTime: 2025-08-27 16:00:06
 * @LastEditors: lixx
-->
<template>
  <div class="chat-container">
    <div class="chat-header">
      <h5>流式文本输出</h5>
    </div>
    <div class="chat-messages">
      <div class="message-content" style="color: #fff">
        {{ msg }}
      </div>
    </div>
    <div class="btns">
      <button @click="connectEvent">连接</button>
      <button @click="stopEvent">停止</button>
      <button @click="clearEvent">清空</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
const contentList = ref([]);
let msg = ref("");
let eventSource = null;
// 创建连接
const connectEvent = () => {
  eventSource = new EventSource("/api/getReqText");
  eventSource.onmessage = (event) => {
    msg.value = msg.value + event.data;
    //contentList.value.push(event.data);
    if (event.data === "end") {
      eventSource.close();
    }
    console.log(msg.value);
  };
};

// 清空
const clearEvent = () => {
  msg.value = "";
};
// 停止连接
const stopEvent = () => {
  eventSource.close();
};
</script>

<style scoped>
@import "./style/chat.css";
</style>
